<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React-Leaflet UMD example</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/@babel/standalone"></script>
    <script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js"></script>
    <script src="../dist/react-leaflet.min.js"></script>
    <style>
      body {
        padding: 20px;
      }
      .leaflet-container {
        height: 400px;
        width: 80%;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel" data-presets="es2015,react">
      const React = window.React
      const { Map: LeafletMap, TileLayer, Marker, Popup } = window.ReactLeaflet

      const position = [51.505, -0.09]
      const Example = () => (
        <LeafletMap center={position} zoom={13}>
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={position}>
            <Popup>
              <span>
                A pretty CSS3 popup. <br /> Easily customizable.
              </span>
            </Popup>
          </Marker>
        </LeafletMap>
      )

      window.ReactDOM.render(<Example />, document.getElementById('container'))
    </script>
  </body>
</html>
